﻿@using EbayApplication.Models;

@model  EbayApplication.Web.Models.ProductModels.ProductDetailedViewModel
@{
    ViewBag.Title = "Details";
}


@Html.Partial("_Details", Model.Product)

@if(Model.Auction != null && User.Identity.IsAuthenticated)
{
    if (User.Identity.Name == Model.Product.Owner)
    {
        <p>Own product</p>
    }
    else
    {
        @Html.Partial("_BaseAuction", Model.Auction)
    }
}
else
{
     <p>No auctions for this product</p>
}
<div id="similar-products" class="row-fluid clearfix">
    <h4><em>You may also like:</em></h4>
    @Html.Partial("_SimilarProducts", Model.SimilarProducts)
</div>
<div id="details-tabs">
    @(Html.Kendo().TabStrip()
          .Name("tabstrip")
          .Items(tabstrip =>
          {
              tabstrip.Add().Text("Description")
                  .Selected(true)
                  .Content(
                  @<text>
                    <div>
                        <div> @Model.Product.Description </div>
                    </div>
                    
                </text>);

              tabstrip.Add().Text("Shipping and payments")
                  .Content(
                  @<text>
                    <div>
                        <div> Will be delivered for @Model.Product.DeliveryTime days.</div>
                    </div>
                </text>);           
          })
    )
</div>

<style scoped>
    #details-tabs {
        word-wrap: break-word;
        width: 360px;
        height: 37px;
        margin: 30px auto;
        padding: 80px 15px 0 15px;
    }

        #details-tabs h2 {
            font-weight: lighter;
            font-size: 5em;
            padding: 0;
            margin: 0;
        }

            #details-tabs h2 span {
                background: none;
                padding-left: 5px;
                font-size: .5em;
                vertical-align: top;
            }

        #details-tabs p {
            margin: 0;
            padding: 0;
        }
    #comment-field {
        width: 300px;
        height: 100px;
    }
</style>

<div class="container">
    <h3>Ask a Question for the product</h3>
    <div id="questions">
        @foreach (var item in Model.Product.Questions)
        {
            @Html.Partial("_Comment", item)
        }
    </div>
    @using (Ajax.BeginForm("Comment", new AjaxOptions()
{
    InsertionMode = InsertionMode.InsertAfter,
    HttpMethod = "POST",
    UpdateTargetId = "questions",
    OnSuccess = "clearCommentContentTextArea",
    OnFailure = "errorsProccess"
}))
{ 
    @Html.Hidden("ProductId", Model.Product.Id)
    @Html.TextArea( "content", new { id = "comment-field", rows = 5 }) <br />
    @Html.ValidationMessageFor(x => x.Product.Questions.First().Content, null,
        new { @class = "help-inline" })
    
    <input type="submit" class="btn btn-success" />
}
</div>

<p>
    @Html.ActionLink("Edit", "Edit", new { id = Model.Product.Id }) |
    @Html.ActionLink("Back to List", "Index")
</p>

<div id="answer-panel">
    @using (Ajax.BeginForm("Answer", new AjaxOptions()
    {
        InsertionMode = InsertionMode.InsertAfter,
        HttpMethod = "POST",
        UpdateTargetId = "answer-current",
        OnSuccess = "clearAnswerTextArea",
        OnFailure = "errorsProccess"
    }))
    {
        @Html.Hidden("questionId", "", new { id = "answer-id" })
        @Html.TextArea("Content", new { id = "answer-field", rows = 5,
            placeholder = "answer the question" }) <br />
    
        <input type="submit" class="btn btn-success" />
        <button id="close" class="btn btn-info"> Close the answer </button>
    }
</div>

@section Scripts {
    <script>
        function clearCommentContentTextArea() {
            $("#comment-field").val("")
        }
        function errorsProccess(error) {
            alert("Wasn't able to add question")
        }
        function clearAnswerTextArea() {
            $("#answer-panel").hide()
            $("#answer-field").val("")
        }

        $(function () {
            var answerPanel = $("#answer-panel")
            answerPanel.hide();
            answerPanel.visible = false;
            $(".add-answer").on("click", function (event) {
                event.preventDefault();

                var currentLinkParent = $(this).parent().parent();                
                var parentId = $(currentLinkParent).attr("id")
                console.log($("#" + parentId + "> .answers"))
                $(".answers").attr({id:""})
                $("#" + parentId + "> .answers").attr({ id: "answer-current" })
                $("#answer-id").val(parentId)
                console.log($("#answer-id").val())
                answerPanel.show();
                $(currentLinkParent).append(answerPanel)
            })

            $("#close").on("click", function (event) {
                event.preventDefault();
                answerPanel.hide();
            })
        })()
    </script>
@Scripts.Render("~/bundles/jqueryval")
}

